<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生页面</title>
    <link rel="shortcut icon" href="/img/xuexi.png">
    <!-- <link rel="stylesheet" href="/client/src/css0.css"> -->
    <script src="../lib/jquery.min.js"></script>
    <!-- <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script> -->
    <style>
        .container {
            width: 100%;
            height: 1000px;
        }

        .personal {
            position: absolute;
            top: 1px;
            width: 500px;
            height: 300px;

            float: left;
            left: 245px;
        }

        .tu01 {
            float: left;
            width: 150px;
            height: 100%;
            left: -42px;
            position: relative;
            top: 16px;

        }

        .biao {
            margin-top: 20px;
        }

        .div1 {
            width: 200px;
            height: 246px;
            color: royalblue;
            border: 1px solid;
            float: left;
            margin-top: 20px;
        }

        .div2 {
            margin-left: 20px;
        }

        #avatar_img {
            /* position: absolute; */
            /* top: 25px; */

            border-radius: 50%;
            border: 1px solid rgb(121, 115, 115);
            display: block;
            position: relative;
            top: 10px;
        }

        .table {
            border: 1px solid;
            height: 50px;
            margin-top: 15px;
            background-color: #008c8c;

        }

        .input {
            float: right;
            position: absolute;
            margin-top: -43px;
            position: absolute;
            height: 24px;
            margin-left: 1300px;
        }

        /* #btn_sc { */
        /* width: 72px; */
        /* height: 30px; */
        /* float: left; */
        /* position: relative; */
        /* top: -192px; */
        /* left: 250px; */
        /* background-color: #ccc; */
        /* opacity: 0.77; */

        /* } */
    </style>
    <script>
        $(document).ready(function () {
            //首先隐藏上传按钮
            $("#btn_sc").hide();
            $('#input').change(function () {
                $("#btn_sc").show();
            });
        })
        function upload(obj) {
            //获取展示图片的区域
            var img = document.getElementById("showImg");
            //获取文件对象
            let file = obj.files[0];
            //获取文件阅读器
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //给img的src设置图片url
                img.setAttribute("src", this.result);
            }
            var formData = new FormData();
            formData.append('file', $('#input')[0].files[0]);  //添加图片信息的参数
            formData.append('sizeid', 123);  //添加其他参数
            console.log(formData)
            // $('#btn_sc').click(function () {
            // console.log('点击了')
            // var formData = new FormData();
            // formData.append('file', $('#input')[0].files[0]);  //添加图片信息的参数
            // formData.append('sizeid', 123);  //添加其他参数
            // $.ajax({
            // type: "POST",
            // url: `http://localhost/stu`,
            // cache: false, //上传文件不需要缓存
            // data: formData,
            // dataType: 'JSON',
            // cache: false,
            // processData: false,
            // contentType: false
            // }).then(data => {
            // console.log('成功')
            // })
            // })

            //头像上传
            console.log('加油加油！')
        }







    </script>
    <script>
        //cookies中拿数据
    </script>
    <script>
         const URL = "http://localhost:8888/";//服务器地址
        setTimeout(() => {
            console.log($('.container').val())
            if ($('.container').val() == '' || $('.table').val() == '') {
                console.log('okokoko');
                $.ajax({
                    url: "http://localhost:8802/stujz",
                    type: "POST",
                    data: {}
                }).then(data => {
                    console.log("请求成功")
                })

            }
        }, 1000)

    </script>
</head>

<body>
    <div class="container">

        <img src="img/304047.jpg" alt="" style=" width: 100%;height: 300px;">
        <div class="personal">
            <div class="tu01 ">


                <!-- style="width:100px;height: 100px;border: 1px solid;" -->
                <form action=“” method="post">
                    <div style="width:100px;height:100px;border:1px solid;border-radius:50%;">
                        <img src="img/touxiang.png" alt="" id="showImg"
                            style="width:100px;height:100px;border-radius:50%;">
                    </div>
                    <input type="file" name="" id="input" value="" onchange="upload(this)" />
                    <input type="submit" value="上传" id="btn_sc" />
                </form>



            </div>
            <ul>
                <li class="biao">姓名：高恒</li>
                <li class="biao">学号：20161102567</li>
                <li class="biao">学院：物理与电子信息工程</li>
                <li class="biao">专业：电子信息工程</li>
            </ul>
        </div>


        <div class="container">
            <div class="table">
                <p>实验1</p> <input type="text" class="input" value="评分:">
            </div>
            <div class="table">
                <p>实验2</p> <input type="text" value="评分:">
            </div>
            <div class="table">
                <p>实验3</p> <input type="text" value="评分:">
            </div>
            <div class="table">
                <p>实验4</p> <input type="text" value="评分:">
            </div>
            <div class="table">
                <p>实验5</p> <input type="text" value="评分:">
            </div>
            <div class="table">
                <p>实验6</p> <input type="text" value="评分:">
            </div>
            <div class="table">
                <p>实验7</p> <input type="text" value="评分:">
            </div>
        </div>


    </div>
    <script>













    </script>

</body>

</html>